
import { log } from 'console';

import { dataType } from 'element-plus/es/components/table-v2/src/common.mjs';

import { dataType } from 'element-plus/es/components/table-v2/src/common.mjs';

import { dataType } from 'element-plus/es/components/table-v2/src/common.mjs';

<script setup lang="ts">
import * as echarts from 'echarts/core';
import {
    TitleComponent,
    TitleComponentOption,
    TooltipComponent,
    TooltipComponentOption,
    ToolboxComponent,
    ToolboxComponentOption,
    GridComponent,
    GridComponentOption,
    LegendComponent,
    LegendComponentOption
} from 'echarts/components';
import {
    LineChart,
    LineSeriesOption
} from 'echarts/charts';
import {
    UniversalTransition
} from 'echarts/features';
import {
    CanvasRenderer
} from 'echarts/renderers';
import { EnvironmentService } from '@/api/environment';

echarts.use(
    [TitleComponent, TooltipComponent, ToolboxComponent, GridComponent, LineChart, LegendComponent, CanvasRenderer, UniversalTransition]
);

type EChartsOption = echarts.ComposeOption<
    TitleComponentOption | TooltipComponentOption | ToolboxComponentOption | GridComponentOption | LineSeriesOption | LegendComponentOption
>
// 基于准备好的dom，初始化echarts实例
const chart = ref();
let myChart: echarts.ECharts | null = null;
var option: EChartsOption;

interface DataItem {
    name: string;
    value: [Date, number];
}

function getData(number: number): DataItem {
    const now = new Date();
    return {
        name: now.toString(),
        value: [
            now,
            number
        ]
    }
}

let gpuData: DataItem[] = [];
let cpuData: DataItem[] = [];
let memData: DataItem[] = [];

// 指定图表的配置项和数据
const setOption = () => {
    myChart= echarts.init(chart.value);
    option = {
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis',
        // formatter: function (params: any) {
        //     params = params[0];
        //     var date = new Date(params.name);
        //     return (
        //         date.getDate() + '/' +
        //         (date.getMonth() + 1) + '/' +
        //         date.getFullYear() + ' : ' +
        //         params.value[1]
        //     );
        // },
        axisPointer: {
            type: 'cross',
            animation: false
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    legend: {
        data: ['GPU', 'CPU', 'Memory']
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        max: 100,
    },
    series: [
        {
            name: 'GPU',
            type: 'line',
            smooth: true,
            symbol: 'none',
            data: gpuData,
            areaStyle: {
                color: '#91cc75'
            },
            itemStyle: {
                color: '#91cc75'
            },
            emphasis: {
                disabled: false
            }
        },
        {
            name: 'CPU',
            type: 'line',
            smooth: true,
            symbol: 'none',
            data: cpuData,
            areaStyle: {
                color: '#73c0de'
            },
            itemStyle: {
                color: '#73c0de'
            },
            emphasis: {
                disabled: false
            }
        },
        {
            name: 'Memory',
            type: 'line',
            smooth: true,
            symbol: 'none',
            data: memData,
            areaStyle: {
                color: '#5470c6'
            },
            itemStyle: {
                color: '#5470c6'
            },
            emphasis: {
                disabled: false
            }
        }
    ]
    };
    option && myChart.setOption(option);
}

const timer = ref();
onMounted(() => {
    
    setOption()
    timer.value = setInterval(() => {
        EnvironmentService.getServerUsage().then((result) => {
            gpuData.push(getData(result.data.gpu));
            cpuData.push(getData(result.data.cpu));
            memData.push(getData(result.data.mem));
            myChart?.setOption<echarts.EChartsCoreOption>({
                series: [
                    {
                        name: 'GPU',
                        data: gpuData
                    },
                    {
                        name: 'CPU',
                        data: cpuData
                    },
                    {
                        name: 'Memory',
                        data: memData
                    }
                ]
            });
        });
    }, 1000);
})

onUnmounted(() => {
    clearInterval(timer.value)
})

</script>
<template>
    <div ref="chart" style="width: auto; height: 350px; padding: 0%; " autore></div>
</template>